<template>


         <div class="recharge">

        <div class="header"><van-nav-bar title="充币" left-text="返回" right-text="充值记录"  @click-left="$router.go(-1)"  @click-right="onClickRight" left-arrow/></div>

        <div class="QRcode">
            <p><span>USDT</span></p>
            <div pic>
                <img :src="QRcodeImg" style="width: 10rem;height: 10rem;"/>
                <div> <van-button type="default" @click="saveImg">保存二维码</van-button></div>
            </div>
        </div>

        <div class="USDT_link">
            <p>USDT地址：</p>
            <div val v-html="data.usdt_addr"></div>
            <div but> <van-button type="default" @click="copyUSDT">复制地址</van-button></div>
            <div number_rech>
                <div title>请输入充值数量</div>
                <!-- <van-field v-model="digit" type="digit" placeholder="请输入充值数量" /> -->
               <div style="display:flex"> <input v-model="number_rech" type="text" @input="input"   maxlength="5" /></div>
            </div>
            <div count>
                
                <van-slider v-model="value" @change="onChange" bar-height="30px" :min="1"  :max="99999" >
                       
                         
                </van-slider>
                
            </div>
            <div>
                <div style="padding-left:1rem;margin-bottom: 1rem;">充值数量：{{value}}</div>
            </div>
            
        </div>
        <div sub> <van-button type="default" @click="buy">提交充值</van-button></div>

        <div prompt>
            <div>1.请勿向上述地址充值任何非ERC-20USDT 资产，否则资产将不可找回。</div>
            <div> 2.最小充值金额为：1USDT，小于最小金额的充值将不会上账且无法退回。</div>
        </div>
     </div>


</template>

<script>

export default {

data() {
    return {
        QRcodeImg:require('../../assets/img/recharge_2.jpg'),
        data:{},
         value: 1,
         number_rech: 1,
    }
},
mounted() { 
    this.base.head_status()
    this.show();
},

 methods: {
     input(){
         let that=this;

           that.number_rech = that.number_rech.replace(/\D/g, '')
           if(!that.base.empty_b(that.number_rech)){
                that.number_rech=1;
           }
           that.value=parseInt(that.number_rech)
     },
      onChange(value) {
         
          let that=this;
          that.number_rech=that.value
    },
    onClickRight(){
       
        this.$router.push({ name: "recharge_notes_USDT",params:{price1: this.$route.params.price1,price2: this.$route.params.price2} });
    },
     show(){
         
             let that=this;
               var data={token:JSON.parse(localStorage.userinfo).token}
              
                       that._API.getChong(data).then(res => {
                            if(res.code==200){
                                  that.data=res.data;
                                  that.QRcodeImg= that.baseURL+that.data.usdt_number;
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
     },

     buy(){
            
    
            let that=this;
               var data={token:JSON.parse(localStorage.userinfo).token,url:that.data.usdt_addr,number:that.value}
              
                       that._API.recharge(data).then(res => {
                            if(res.code==200){
                               
                            }
                              that.$dialog.alert({title: '提示信息', message: res.msg }).then(() => {
                                    that.onClickRight();
                                });
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
     },
     copyUSDT(){  //复制文本
         var that=this;
          var clipBoard = api.require('clipBoard');
      
           clipBoard.set({
                    value: that.data.usdt_addr
                }, function(ret, err) {
                    if (ret) {
                        that.$toast({ message: "USDT复制成功", position: "bottom" });
                       
                    } else {
                         that.$toast({ message: "USDT复制失败！", position: "bottom" });
                       
                    }
                })
     },
     saveImg(){
         let that=this;
         api.download({
                url: that.baseURL+that.data.usdt_number,
                
                report: true,
                cache: true,
                allowResume: true
            }, function(ret, err) {
                if (ret.state == 1) {
                   
                        api.saveMediaToAlbum({
                            path: ret.savePath,
                        }, function(ret, err) {
                            if (ret && ret.status) {
                                that.$toast({ message: "保存二维码成功", position: "bottom" });
                            } else {
                                that.$toast({ message: "保存二维码失败", position: "bottom" });
                            }
                        });
                
                } else {

                }
            });
       
     }


}
}
</script>


<style lang="scss" scoped >


    /deep/.van-nav-bar{background-color: initial;}
    /deep/.header *,/deep/.van-nav-bar .van-icon{color:white}
    
    .QRcode>p{padding: 1rem 20%;}
    .QRcode>p>span{border-bottom:2px solid #831BFA}
    .QRcode [pic]{text-align: center}
    .QRcode [pic] .van-button{background-color: #831BFA;color: white;border:0;border-radius: 3rem;margin-top: 1rem;    height: 1.875rem; line-height: 1.8rem;}
   
    .USDT_link>p{padding-left: 1rem;}
    .USDT_link [val]{display: flex;padding:.5rem 1rem;align-items: center;    box-shadow: inset 0 0 1rem 0px #7b00ff;margin: 1rem .8rem;border-radius: .5rem;font-size: 0.7rem;}
    .USDT_link>[but] {text-align: center;}
    .USDT_link>[but] .van-button{background-color: #831BFA;color: white;border:0;border-radius: 3rem;    height: 1.875rem;
    line-height: 1.8rem;}
    .USDT_link>[count] .van-slider{position: relative; box-shadow: inset 0 0 1rem 0px #7b00ff;margin: 1rem .8rem;border-radius: .5rem;background:initial}
    /deep/.van-progress__pivot{line-height: 2rem;    border-radius: .3rem;}

    .recharge [sub]{text-align: center;}
    .recharge [sub] .van-button{background-color: #831BFA;color: white;border:0;border-radius: 3rem;width: 90%;}


    [prompt]{margin: 1rem 0;}
    [prompt]>div{font-size: 0.7rem;margin: .0rem 5%;}
    /deep/.van-slider__bar{    border-radius: 0.5rem;widows: 50%}

    /deep/.van-slider__button-wrapper{    position: absolute; top: 50%;right: 0;-webkit-transform: translate3d(50%,-50%,0);transform: translate3d(50%,-50%,0);}
    /deep/ .custom-button{   height: 30px;background-color: white;border-radius: 0.2rem;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);box-shadow: 0 1px 2px rgba(0,0,0,.5);}

    /deep/.van-dialog__header,/deep/.van-dialog{ color: black;background: red;}
     [number_rech]{width:100%}
    [number_rech]>[title]{margin-left:1rem}

     /deep/[number_rech] span{color:white}
     /deep/[number_rech] input{    box-shadow: inset 0 0 1rem 0px #7b00ff;color:white;    padding: .4rem 0rem .4rem 1rem; border-radius: .5rem;width:100%;    margin: 1rem 1rem 0rem;}
     /deep/.van-field__control::-webkit-input-placeholder { color: white;}








       
</style>
